<script lang="ts" setup>
import type { ShopApi } from '@/apis'

const props = withDefaults(defineProps<{
  active: boolean
  disabled: boolean
  coupon: ShopApi.CouponDetail
}>(), {
  active: false,
  disabled: false,
})
const emit = defineEmits(['click'])
const clickHandle = () => {
  if (props.disabled) {
    return
  }
  emit('click')
}
</script>

<template>
  <view class="card border" :class="{ active: props.active, disabled: props.disabled }" @click="clickHandle">
    <view class="flex items-center justify-between">
      <view class="line font-size-[28rpx]" :class="{ 'disabled-color': props.disabled }">
        {{ coupon.template.name }}
      </view>
      <text class="font-size-[22rpx] color-[#4E5969]" :class="{ 'disabled-color': props.disabled }">
        {{ coupon.endValidTime }}前可用
      </text>
    </view>
    <view class="divider" />
    <view class="flex-row-between-center">
      <view class="flex-col-start-start">
        <text v-if="coupon.template.discountType === 'MJ'" class="font-size-[48rpx] color-[#FF7D00] font-600" :class="{ 'disabled-color': props.disabled }">
          ￥{{ coupon.template.discountAmount }}
        </text>
        <text v-else class="font-size-[48rpx] color-[#FF7D00] font-600" :class="{ 'disabled-color': props.disabled }">
          {{ coupon.template.discountAmount / 10.0 }}折
        </text>
        <text v-if="coupon.template.thresholdAmount" class="mt-1 text-[28rpx] text-gray-6" :class="{ 'disabled-color': props.disabled }">
          满￥{{ coupon.template.thresholdAmount }}使用
        </text>
        <text v-else class="mt-1 text-14px text-gray-5" :class="{ 'disabled-color': props.disabled }">
          无门槛
        </text>
      </view>

      <view class="text-right text-14px text-gray-5">
        <view v-if="coupon.template.classIdLimit && coupon.template.classIdLimit.length">
          指定班级可用
        </view>
        <!-- 年级 -->
        <view v-if="coupon.template.classGradeLimit && coupon.template.classGradeLimit.length">
          限{{ coupon.template.classGradeLimit.map(item => useDictLabel('Grade', item)).join('、') }}可用
        </view>
        <!-- 科目 -->
        <view v-if="coupon.template.classSubjectLimit && coupon.template.classSubjectLimit.length">
          限{{ coupon.template.classSubjectLimit.map(item => useDictLabel('Subject', item)).join('、') }}可用
        </view>
        <!-- 班级类别 -->
        <view v-if="coupon.template.classCategoryLimit && coupon.template.classCategoryLimit.length">
          限{{ coupon.template.classCategoryLimit.map(item => useDictLabel('ClassCategoryEnum', item)).join('、') }}可用
        </view>
        <!-- 班级学年 -->
        <view v-if="coupon.template.classYearLimit && coupon.template.classYearLimit.length">
          限{{ coupon.template.classYearLimit.map(item => `${item}年`).join('、') }}课程可用
        </view>
        <!-- 班级学期 -->
        <view v-if="coupon.template.classTermLimit && coupon.template.classTermLimit.length">
          限{{ coupon.template.classTermLimit.map(item => useDictLabel('TermEnum', item)).join('、') }}可用
        </view>
        <span
          v-if="!coupon.template.classIdLimit
            && !coupon.template.classCategoryLimit
            && !coupon.template.classSubjectLimit
            && !coupon.template.classGradeLimit
            && !coupon.template.classYearLimit
            && !coupon.template.classTermLimit
          "
        >
          无使用限制
        </span>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .border {
    border: 1px solid transparent;
  }
  .active {
    background: #f7ece0 !important;
    border: 1px solid #FF7D00;
    box-sizing: border-box;
  }
  .disabled {
    background: #F2F3F5 !important;
  }
  .disabled-color {
    color: #86909C !important;
    &::before {
      background: #86909C !important;
    }
  }
  .line {
    padding-left: 20rpx;
    position: relative;
    &::before {
      position: absolute;
      content: "";
      background: #165DFF;
      width: 6rpx;
      height: 28rpx;
      border-radius: 2rpx;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .divider {
    height: 0;
    border-bottom: 1px dashed #cacdd3;
    margin: 20rpx 0;
  }
</style>
